<template>
  <view class="trust-cards-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">信任卡牌</text>
        <text class="page-subtitle">管理你的信任关系</text>
      </view>
      
      <!-- 信任统计 -->
      <view class="trust-stats">
        <view class="stat-item">
          <text class="stat-value">{{ trustStats.averageTrust }}</text>
          <text class="stat-label">平均信任</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ trustStats.highTrustCards }}</text>
          <text class="stat-label">高度信任</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ trustStats.brokenTrustCards }}</text>
          <text class="stat-label">破裂信任</text>
        </view>
      </view>
    </view>

    <!-- 筛选和排序 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          :class="{ active: activeFilter === 'all' }"
          @click="setFilter('all')"
        >
          <text class="tab-text">全部</text>
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: activeFilter === 'high' }"
          @click="setFilter('high')"
        >
          <text class="tab-text">高度信任</text>
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: activeFilter === 'medium' }"
          @click="setFilter('medium')"
        >
          <text class="tab-text">一般信任</text>
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: activeFilter === 'low' }"
          @click="setFilter('low')"
        >
          <text class="tab-text">低度信任</text>
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: activeFilter === 'broken' }"
          @click="setFilter('broken')"
        >
          <text class="tab-text">信任破裂</text>
        </view>
      </view>
      
      <view class="sort-options">
        <button class="sort-btn" @click="toggleSort">
          <text class="sort-icon">🔄</text>
          <text class="sort-text">{{ sortOrder === 'desc' ? '降序' : '升序' }}</text>
        </button>
      </view>
    </view>

    <!-- 信任卡牌列表 -->
    <view class="cards-container">
      <view class="cards-grid">
        <TrustCard
          v-for="card in filteredCards"
          :key="card.id"
          :cardData="card"
          :trustValue="card.currentTrustValue"
          :showDetails="true"
          @trust-action="handleTrustAction"
          @show-details="showCardDetails"
        />
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredCards.length === 0">
        <text class="empty-icon">📋</text>
        <text class="empty-text">没有找到符合条件的卡牌</text>
        <text class="empty-desc">尝试调整筛选条件</text>
      </view>
    </view>

    <!-- 信任历史 -->
    <view class="history-section">
      <view class="section-header">
        <text class="section-title">信任历史</text>
        <button class="view-all-btn" @click="showFullHistory">
          <text class="btn-text">查看全部</text>
        </button>
      </view>
      
      <view class="history-list">
        <view 
          class="history-item" 
          v-for="record in recentHistory" 
          :key="record.id"
        >
          <view class="history-icon">{{ getHistoryIcon(record.reason) }}</view>
          <view class="history-content">
            <text class="history-reason">{{ record.reason }}</text>
            <text class="history-time">{{ formatTime(record.timestamp) }}</text>
          </view>
          <view class="history-change" :class="record.change > 0 ? 'positive' : 'negative'">
            <text class="change-text">{{ record.change > 0 ? '+' : '' }}{{ record.change }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 卡牌详情弹窗 -->
    <view class="card-detail-modal" v-if="showDetailModal" @click="closeDetailModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">卡牌详情</text>
          <button class="close-btn" @click="closeDetailModal">×</button>
        </view>
        
        <view class="modal-body" v-if="selectedCard">
          <view class="detail-card">
            <view class="card-header">
              <text class="card-icon">{{ selectedCard.icon }}</text>
              <text class="card-name">{{ selectedCard.name }}</text>
            </view>
            
            <view class="card-info">
              <text class="card-description">{{ selectedCard.description }}</text>
              
              <view class="trust-details">
                <view class="detail-item">
                  <text class="detail-label">当前信任值</text>
                  <text class="detail-value">{{ selectedCard.currentTrustValue }}/100</text>
                </view>
                <view class="detail-item">
                  <text class="detail-label">信任等级</text>
                  <text class="detail-value">{{ getTrustLevelText(selectedCard.currentTrustValue) }}</text>
                </view>
                <view class="detail-item">
                  <text class="detail-label">稀有度</text>
                  <text class="detail-value">{{ getRarityText(selectedCard.rarity) }}</text>
                </view>
              </view>
              
              <view class="trust-effects">
                <text class="effects-title">信任效果</text>
                <view class="effects-list">
                  <view 
                    class="effect-item" 
                    v-for="effect in getTrustEffects(selectedCard.currentTrustValue)" 
                    :key="effect.id"
                  >
                    <text class="effect-icon">{{ effect.icon }}</text>
                    <text class="effect-name">{{ effect.name }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn primary" @click="showTrustDashboard">
        <text class="btn-icon">📊</text>
        <text class="btn-text">信任仪表盘</text>
      </button>
      
      <button class="action-btn secondary" @click="resetAllTrust">
        <text class="btn-icon">🔄</text>
        <text class="btn-text">重置信任</text>
      </button>
    </view>
  </view>
</template>

<script>
import TrustCard from '@/components/TrustCard.vue'
import trustCardManager from '@/utils/trust-card-manager.js'

export default {
  name: 'TrustCardsPage',
  components: {
    TrustCard
  },
  
  data() {
    return {
      activeFilter: 'all',
      sortOrder: 'desc',
      showDetailModal: false,
      selectedCard: null,
      trustCards: [],
      trustHistory: [],
      trustStats: {}
    }
  },
  
  computed: {
    filteredCards() {
      let cards = [...this.trustCards]
      
      // 筛选
      if (this.activeFilter !== 'all') {
        cards = cards.filter(card => {
          const level = trustCardManager.getTrustLevel(card.currentTrustValue)
          return level === this.activeFilter
        })
      }
      
      // 排序
      cards.sort((a, b) => {
        if (this.sortOrder === 'desc') {
          return b.currentTrustValue - a.currentTrustValue
        } else {
          return a.currentTrustValue - b.currentTrustValue
        }
      })
      
      return cards
    },
    
    recentHistory() {
      return this.trustHistory.slice(0, 5)
    }
  },
  
  onLoad() {
    this.loadTrustData()
  },
  
  onShow() {
    this.loadTrustData()
  },
  
  methods: {
    // 加载信任数据
    loadTrustData() {
      trustCardManager.loadData()
      this.trustCards = trustCardManager.getAllCards()
      this.trustHistory = trustCardManager.getTrustHistory()
      this.trustStats = trustCardManager.getTrustStats()
    },
    
    // 设置筛选
    setFilter(filter) {
      this.activeFilter = filter
    },
    
    // 切换排序
    toggleSort() {
      this.sortOrder = this.sortOrder === 'desc' ? 'asc' : 'desc'
    },
    
    // 处理信任行动
    handleTrustAction(actionData) {
      const result = trustCardManager.performTrustAction(
        actionData.cardId,
        actionData.action,
        actionData.targetCardId
      )
      
      if (result.success) {
        uni.showToast({
          title: result.message,
          icon: 'success'
        })
        
        // 刷新数据
        this.loadTrustData()
      } else {
        uni.showToast({
          title: result.message,
          icon: 'none'
        })
      }
    },
    
    // 显示卡牌详情
    showCardDetails(cardData) {
      this.selectedCard = cardData.cardData
      this.showDetailModal = true
    },
    
    // 关闭详情弹窗
    closeDetailModal() {
      this.showDetailModal = false
      this.selectedCard = null
    },
    
    // 显示完整历史
    showFullHistory() {
      uni.navigateTo({
        url: '/pages/trust-cards/history/history'
      })
    },
    
    // 显示信任仪表盘
    showTrustDashboard() {
      uni.navigateTo({
        url: '/pages/trust-cards/dashboard/dashboard'
      })
    },
    
    // 重置所有信任
    resetAllTrust() {
      uni.showModal({
        title: '重置信任',
        content: '确定要重置所有卡牌的信任值吗？此操作不可撤销。',
        success: (res) => {
          if (res.confirm) {
            trustCardManager.resetAllTrust()
            this.loadTrustData()
            uni.showToast({
              title: '信任值已重置',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 获取历史图标
    getHistoryIcon(reason) {
      if (reason.includes('协作')) return '🤝'
      if (reason.includes('背叛')) return '⚠️'
      if (reason.includes('宽恕')) return '🙏'
      if (reason.includes('忠诚')) return '💎'
      if (reason.includes('修复')) return '🔧'
      return '📝'
    },
    
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) return '刚刚'
      if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
      if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
      return Math.floor(diff / 86400000) + '天前'
    },
    
    // 获取信任等级文本
    getTrustLevelText(trustValue) {
      return trustCardManager.getTrustLevelText(trustValue)
    },
    
    // 获取稀有度文本
    getRarityText(rarity) {
      const rarities = {
        common: '普通',
        rare: '稀有',
        epic: '史诗',
        legendary: '传说'
      }
      return rarities[rarity] || '未知'
    },
    
    // 获取信任效果
    getTrustEffects(trustValue) {
      return trustCardManager.calculateTrustEffects(trustValue)
    }
  }
}
</script>

<style scoped>
.trust-cards-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}

/* 页面头部 */
.page-header {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.header-content {
  text-align: center;
  margin-bottom: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: #666;
}

.trust-stats {
  display: flex;
  justify-content: space-around;
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 20rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 20rpx;
  color: #666;
}

/* 筛选区域 */
.filter-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.filter-tabs {
  display: flex;
  gap: 8rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 8rpx 16rpx;
  background: #f0f0f0;
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: #667eea;
  color: white;
}

.tab-text {
  font-size: 22rpx;
  font-weight: bold;
}

.sort-options {
  display: flex;
  justify-content: flex-end;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 8rpx 16rpx;
  background: #f0f0f0;
  border: none;
  border-radius: 12rpx;
  font-size: 22rpx;
  color: #666;
  cursor: pointer;
}

.sort-icon {
  font-size: 20rpx;
}

.sort-text {
  font-size: 20rpx;
}

/* 卡牌容器 */
.cards-container {
  margin-bottom: 20rpx;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
  gap: 20rpx;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80rpx 20rpx;
  color: #999;
}

.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
  color: #666;
}

.empty-desc {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 信任历史 */
.history-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.view-all-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  cursor: pointer;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.history-icon {
  font-size: 24rpx;
  margin-right: 16rpx;
}

.history-content {
  flex: 1;
}

.history-reason {
  font-size: 24rpx;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.history-time {
  font-size: 20rpx;
  color: #999;
}

.history-change {
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.history-change.positive {
  background: #e8f5e8;
  color: #4caf50;
}

.history-change.negative {
  background: #ffeaea;
  color: #f44336;
}

/* 卡牌详情弹窗 */
.card-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 600rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  background: none;
  border: none;
  font-size: 36rpx;
  color: white;
  cursor: pointer;
  padding: 10rpx;
}

.modal-body {
  padding: 30rpx;
}

.detail-card {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 24rpx;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.card-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.card-description {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.trust-details {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
  border-bottom: 1rpx solid #e0e0e0;
}

.detail-label {
  font-size: 22rpx;
  color: #666;
}

.detail-value {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
}

.trust-effects {
  margin-top: 16rpx;
}

.effects-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.effect-item {
  display: flex;
  align-items: center;
  padding: 8rpx 12rpx;
  background: white;
  border-radius: 8rpx;
}

.effect-icon {
  font-size: 20rpx;
  margin-right: 8rpx;
}

.effect-name {
  font-size: 20rpx;
  color: #333;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 16rpx;
  margin-top: 20rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 16rpx 24rpx;
  border: none;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.action-btn.secondary {
  background: #f0f0f0;
  color: #666;
  border: 2rpx solid #e0e0e0;
}

.action-btn:hover {
  transform: translateY(-2rpx);
}

.btn-icon {
  font-size: 20rpx;
}

.btn-text {
  font-size: 22rpx;
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-tabs {
    flex-direction: column;
  }
  
  .filter-tab {
    text-align: center;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>

